import { defineComponent, ref, watch, shallowReactive } from 'vue'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          color: [
            '#37a2da',
            '#32c5e9',
            '#9fe6b8',
            '#ffdb5c',
            '#ff9f7f',
            '#fb7293',
            '#e7bcf3',
            '#8378ea'
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          toolbox: {
            show: true
          },
          calculable: true,
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            bottom: 0,
            x: 'center',
            data: val.xData,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '5%',
            containLabel: true,
            height: '160px'
          },
          xAxis: {
            // show: false,
            type: 'value',
            boundaryGap: [0, 0.05]
          },
          yAxis: {
            type: 'category',
            inverse: true,
            data: val.xData
          },
          series: [
            {
              name: '课程预约排名',
              data: val.seriesData,
              realtimeSort: true,
              type: 'bar',
              colorBy: "data", //按数据变色
              barWidth: "50%", //图形宽度
              showBackground: true,
              backgroundStyle: {
                shadowColor: "#333", //阴影颜色
                shadowBlur: 3,
                borderColor: "#ccc", //背景边框颜色
                color: "#fff", //背景颜色
                // opacity: 0.1,
                borderType: "solid",
                borderWidth: 1,
                borderRadius: [20, 20, 20, 20],
              },
              barCategoryGap: "40%", // 柱形的间距
              itemStyle: {
                // 图形的形状
                borderRadius: [20, 20, 20, 20],
              },
              label: {
                show: true,
                position: "outside", //数据显示位置，默认显示在中间
                color: "#000", //数据文字颜色
                fontSize: 14, //数据文字大小
                fontWeight: 500,
                formatter: function (p) {
                  let value = "";
                  if (p.value > 0) {
                    value = p.value;
                    if (value > 999) {
                      // 数值加千分号
                      let parts = value.toString().split(".");
                      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                      value = parts.join(".");
                    }
                  }
                  return value;
                },

              },
            }
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "220px"
      const width = "280px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

